<template>
	<view>
		<view class="top_div">
			<view class="set_div">
				<navigator class="set_item" url="../set/set">
					<image src="../../static/top_icon_settings.png"></image>
					<view>设置</view>
				</navigator>
			</view>
			<navigator class="header_div" url="../userInfo/userInfo">
				<image src="../../static/center_head_bg.png"></image>
				<view class="right_div">
					<view>{{userInfo.phone}}</view>
					<view>当前排名：{{userInfo.ranking}}</view>
				</view>
			</navigator>
		</view>
		
		<view class="content_div">
			<navigator class="content_item" url="../mycourse/mycourse" hover-class="navigator-hover">
				<image src="../../static/personal_icon_course.png"></image>
				<text>我的课程</text>
				<image src="../../static/sobot_right_arrow_icon.png"></image>
			</navigator>
			
			<navigator class="content_item"  url="../myQuestionBank/myQuestionBank" hover-class="navigator-hover">
				<image src="../../static/icon_course_detail_tk.png"></image>
				<text>我的刷题</text>
				<image src="../../static/sobot_right_arrow_icon.png"></image>
			</navigator>
			
			<view class="content_item">
				<image src="../../static/personal_icon_collect.png"></image>
				<text>当前课程</text>
				<text style="font-size: 26rpx; color: #666666;">{{userInfo.courseName}}</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				curCourse:"阿里云ACA",
				userInfo:{}
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		methods:{
			getUserInfo:function(){
				var uid=uni.getStorageSync('uid');
				var that=this;
				uni.request({
					url:this.baseUrl + 'student/getStudent',
					method: 'GET',
					data:{
						'stuId':uid
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						that.userInfo=res.data.data;
					}
				})
			}
		}
	}
</script>

<style>
	.top_div{
		  background-image: linear-gradient(to right, #f86f16 , #e92e2a);
		  padding-bottom: 30rpx;
		  padding-left: 30rpx;
	}
	.top_div .set_div{
		height: 96rpx;
		display: flex;
		justify-content: flex-end;
	}
	.top_div .set_div .set_item{
		height: 96rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-top: 15rpx;
		padding-right: 30rpx;
		padding-left: 30rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		
	}
	.top_div .set_div .set_item image{
		height: 38rpx;
		width: 38rpx;
	}
	.top_div .set_div .set_item view{
		margin-top: 10rpx;
	}
	.header_div{
		height: 122rpx;
		display: flex;
	}
	.header_div image{
		height: 122rpx;
		width: 122rpx;
	}
	.header_div .right_div{
		padding-top: 20rpx;
		margin-left: 20rpx;
	}
	.header_div .right_div view:nth-child(1){
		font-size: 26rpx;
		color: #FFFFFF;
	}
	.header_div .right_div view:nth-child(2){
		color: #FFFFFF;
		font-size: 22rpx;
		margin-top: 20rpx;
		
	}
		
	.content_div{
		background: #FFFFFF;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-shadow: 3px 3px 3px #f3f3f3;
		margin-top: 20rpx;
		
	}
	.content_div .content_item{
		height: 88rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #e8e8e8;
	}
	.content_div .content_item image:nth-child(1){
		height: 30rpx;
		width: 30rpx;
	}
	.content_div .content_item text:nth-child(2){
		flex: 1;
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.content_div .content_item image:nth-child(3){
		height: 26rpx;
		width: 16rpx;
		
		
	}
</style>
